<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS</title>
    <style>
        body{background:#fefefe;}
        .edit_area{
            width:400px;
            height:100px;
            border:1px solid #ccc;
            color:#222;
        }
    </style>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/481/btglu7jb/vue.js"></script>
</head>
<body>
<div id="container">
    <editor-text></editor-text>
</div>

<script type="text/x-template" id="editor-with-text">

    <div class="edit_area" contenteditable="true" v-editdiv="textval" :data-vale="tva"></div>

</script>

<script>
    +function(Vue){
        "use strict";
        //注册指令
        function register_directive(){
            Vue.directive('editdiv', {
                bind: function (el, binding, vnode,oldVnode) {
                    console.log(oldVnode);
                    console.log("binding...",binding,vnode);
                    el.innerText = binding.value;
                    binding.hander = function(){
                        console.log(111);
                        el.dataset.vale =el.innerText;
                    };
                    el.addEventListener("keyup",binding.hander);
                },
                update: function (el, binding, vnode) {
                    console.log(el.dataset.vale);
                },
                unbind: function (el, binding, vnode) {
                    console.log("unbindd...");
                    el.removeEventListener("keyup",binding.hander);
                }
            })

        }
        //注册组件
        function register_editor(){
            Vue.component("editor-text",{
                template:"#editor-with-text",
                data:function(){

                    return{
                        textval:'',
                        tva:''
                    }
                }

            });

        }
        //开启根节点
        function init(){
            new Vue({
                el:'#container'

            });
        }
        //注册指令
        register_directive();
        //注册组件
        register_editor();
        init();


    }(Vue);
</script>
</body>
</html>